<template>
    <div class="container"> 
        <el-card>
            <span class="_before">购箱量-日期分析</span>
            <ControlPanel :dataType="3" :timePeriod="timeInterval" :refType = '5' :showTimeTool="true" :showBoxTool="true" :showSortByField="false" @updateValue='getSaleDate'></ControlPanel>
            <LineChart :config="lineConfig" @dataPointClick="dataPointClick"></LineChart>
        </el-card>
        <el-card class="marginTop20">
            <span class="_before">购箱量-订单分析</span>
            <ControlPanel :dataType="3" :timePeriod="timeInterval" :refType = '5' :showTimeTool="true" :showBoxTool="true" :showSortByField="false" @updateValue='getSaleOrderPayAndPackedBoxQty'></ControlPanel>
            <BarChart :config="barConfig"></BarChart>

            <ControlPanel :dataType="3" :timePeriod="timeInterval" :refType = '5' :showTimeTool="false" :showBoxTool="true" :showSortByField="false" @updateValue='getSaleOrderTodoBoxQty'></ControlPanel>
            <BarChart :config="nextBarConfig"></BarChart>
        </el-card>
        <el-card>
            <span class="_before">购箱量-箱贸企业分析</span>
            <ControlPanel :dataType="3" :timePeriod="timeInterval" :refType = '5' :showTimeTool="true" :showBoxTool="true" :showSortByField="false" @updateValue='getSaleBoxEast'></ControlPanel>
            <BarLineChart :config="barLineConfig" @barClick="barLineClick"></BarLineChart>
        </el-card>


        <el-dialog v-model="bar1Dialog" destroy-on-close title="购箱量-提箱城市分析" width="1000">
            <BarChart1 :config="barConfig1"></BarChart1>
        </el-dialog>
        <el-dialog v-model="lineDialog" destroy-on-close title="购箱量-箱贸企业日期分析" width="1000">
            <ControlPanel :sources="1" :dataType="3" :timePeriod="timeInterval" :refType = '5' :showTimeTool="true" :showBoxTool="true" :showSortByField="false" :showCompanyName="true" :companyName="companyName" @updateValue='getSaleBoxEastDate'></ControlPanel>
            <LineChart1 :config="lineConfig1"></LineChart1>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref,reactive,onMounted} from 'vue'
import ControlPanel from '@/views/businessAnalysis/controlPanel'
import LineChart from '@/views/businessAnalysis/chart/line'
import BarChart1 from '@/views/businessAnalysis/chart/bar1'
import BarChart from '@/views/businessAnalysis/chart/bar'
import BarLineChart from '@/views/businessAnalysis/chart/barLine'
import LineChart1 from '@/views/businessAnalysis/chart/line1'
import { saleDate,saleCarryCity,saleOrderPayAndPackedBoxQty,saleOrderTodoBoxQty,saleBoxEast,saleBoxEastDate} from '@/api/businessAnalysis'
import Cookies from 'js-cookie'
let companyId:any
let companyName:any
try { 
    companyId =   JSON.parse(Cookies.get('User-Info')).companyId
    companyName =   JSON.parse(Cookies.get('User-Info')).companyName
} catch (error) {
    companyId =   Cookies.get('User-Info').companyId
    companyName =  Cookies.get('User-Info').companyName
}

// 获取当前日期
const currentDate = new Date();
const currentDateStr = getFormattedDate(currentDate);

// 获取7天后的日期
const futureDate = new Date();
futureDate.setDate(currentDate.getDate() + 6);
const futureDateStr = getFormattedDate(futureDate);

let cahrtData = {
    dataType:'3',
    timePeriod:[currentDateStr,futureDateStr],
    boxType:'1',
    boxCondition:'1',
    sortByField:'5',
    companyId:'',
    dataTime:currentDateStr,
    companyName:companyName
}

const timeInterval = ref([currentDateStr,futureDateStr]) //查询时间区间

// 租箱量- 日期分析-已提箱量-折线图
const lineConfig = reactive({
    xAxisData:[],
    yAxisData:[]
})
const getSaleDate = async (_row:any) => {
    let reqParams = {
        dataType: _row.dataType,
        beginDataTime: _row.timePeriod[0],
        endDataTime: _row.timePeriod[1],
        boxType:_row.boxType == '1'?'':_row.boxType,
        boxCondition:_row.boxCondition == '1'?'':_row.boxCondition
    }
    await saleDate(reqParams).then(res=>{
        if(res.code == "00000" && res.data.length > 0){
            lineConfig.xAxisData.length = 0
            lineConfig.yAxisData.length = 0
            res.data.forEach(item => {
                lineConfig.xAxisData.push(item.dataTime)
                lineConfig.yAxisData.push(item.boxQuantity)
            })
        }
    })
    cahrtData.dataType = _row.dataType
    cahrtData.boxType = _row.boxType
    cahrtData.boxCondition = _row.boxCondition
    
}

const bar1Dialog = ref(false)
const dataPointClick = (row: any)=>{
    console.log("456789",row)
    cahrtData.dataTime = row.name
    getSaleCarryCity(cahrtData)
    bar1Dialog.value = true
}

// 租箱量-城市分析-已提箱量柱状图查询
const barConfig1 = reactive({
    xAxisData:['郑州','青岛'],
    yAxisData:[80,106]
})
const getSaleCarryCity = async(_row:any)=>{ 
        let reqParams = {
            dataType:_row.dataType,
            dataTime:_row.dataTime,
            boxType: _row.boxType == '1'?'':_row.boxType,
            boxCondition: _row.boxCondition == '1'?'':_row.boxCondition,
        } 
        await saleCarryCity(reqParams).then(res => { 
            if(res.code == '00000' && res.data.length > 0 ){
                barConfig1.xAxisData.length = 0
                barConfig1.yAxisData.length = 0
                res.data.forEach(item => { 
                    barConfig1.xAxisData.push(item.cityName)
                    barConfig1.yAxisData.push(item.boxQuantity)
                })
        }

    })  
}


// 租箱量-未还数据分析-柱状图
const barConfig = reactive({
    xAxisData:['已付费','已提'],
    yAxisData:[121,140]
})

const getSaleOrderPayAndPackedBoxQty = async (_row:any) => { 
    let reqParams = {
        dataType:_row.dataType,
        beginDataTime: _row.timePeriod[0],
        endDataTime: _row.timePeriod[1],
        boxType: _row.boxType == '1'?'':_row.boxType,
        boxCondition: _row.boxCondition == '1'?'':_row.boxCondition
    }

    await saleOrderPayAndPackedBoxQty(reqParams).then(res=>{
        if(res.code == "00000"){
            barConfig.yAxisData.length = 0
            if(res.data.paidQty){
                barConfig.yAxisData.push(res.data.paidQty)
            }
            if(res.data.packedQty){
                barConfig.yAxisData.push(res.data.packedQty)
            } 
        }
    })
}


// 租箱量-未还数据分析-柱状图
const nextBarConfig = reactive({
    xAxisData:['待确认','待审核','待申请发票','未付费','待提'],
    yAxisData:[121,140,121,140,130]
})

const getSaleOrderTodoBoxQty = async (_row:any) => { 
    let reqParams = {
        boxType: _row.boxType == '1'?'':_row.boxType,
        boxCondition: _row.boxCondition == '1'?'':_row.boxCondition
    }
    await saleOrderTodoBoxQty(reqParams).then(res=>{
        if(res.code == "00000"){
            nextBarConfig.yAxisData.length = 0
            if(res.data.toBeConfirmedBoxQty){ // 待确认箱量
                nextBarConfig.yAxisData.push(res.data.toBeConfirmedBoxQty)
            }
            if(res.data.toBeReviewedBoxQty){ //待审核订单量
                nextBarConfig.yAxisData.push(res.data.toBeReviewedBoxQty)
            } 
            if(res.data.toBeApplyInvoiceBoxQty){ //待申请发票订单量
                nextBarConfig.yAxisData.push(res.data.toBeApplyInvoiceBoxQty)
            } 
            if(res.data.toBePaidBoxQty){ //待付款|待收售箱款订单量
                nextBarConfig.yAxisData.push(res.data.toBePaidBoxQty)
            } 
            if(res.data.unPackedBoxQty){ //待提箱量
                nextBarConfig.yAxisData.push(res.data.unPackedBoxQty)
            } 
        }
    })
}



//购箱量-箱东分析-已提箱量|占比-柱状图|折线图
const barLineConfig = reactive({
    xAxisData:['亚航','陆海','哈尼泰克','海铁隆鑫','北京丝路'],
    yAxisDataBar:[100,200,300,400,1000],
    yAxisDataLine:[5,10,15,20,50],
    legendData:['已提购箱量（个）','已提购箱量占比（%）']
})
const getSaleBoxEast = async (_row: any) => { 
    let reqParams = {
        dataType:_row.dataType,
        beginDataTime:  _row.timePeriod[0],
        endDataTime:  _row.timePeriod[1],
        boxType: _row.boxType == '1'?'':_row.boxType,
        boxCondition: _row.boxCondition == '1'?'':_row.boxCondition
    }
    await saleBoxEast(reqParams).then(res=>{ 
        if(res.code == '00000' && res.data.length > 0){
            barLineConfig.xAxisData.length = 0
            barLineConfig.yAxisDataBar.length = 0
            barLineConfig.yAxisDataLine.length = 0
            lineConfig1.companyInfo.length = 0
            res.data.forEach(item=>{ 
                barLineConfig.xAxisData.push(item.companyName)
                barLineConfig.yAxisDataBar.push(item.boxQuantity)
                barLineConfig.yAxisDataLine.push(item.proportion)
                const company = {companyId: item.companyId,companyName:item.companyName}
                lineConfig1.companyInfo.push(company)
            }) 

        }
    })
    cahrtData.timePeriod = _row.timePeriod
    cahrtData.dataType = _row.dataType
    cahrtData.boxType = _row.boxType
    cahrtData.boxCondition = _row.boxCondition    
}

const lineDialog  = ref(false)
const barLineClick = (row: any) => {
    console.log("123123",row)
    lineConfig1.companyInfo.forEach(item => { 
        if(item.companyName == row.name){ 
            cahrtData.companyId = item.companyId
        }
    })
    getSaleBoxEastDate(cahrtData)
    lineDialog.value = true
}

const lineConfig1 = reactive({
    companyInfo: [],
    xAxisData: [],
    yAxisData: [],
    legendName: '',
    legendData:['已提购箱量']
})

const getSaleBoxEastDate = async(_row: any) =>{
    let reqParams = {
        companyId:_row.companyId || companyId,
        dataType:_row.dataType,
        beginDataTime:  _row.timePeriod[0],
        endDataTime:  _row.timePeriod[1],
        boxType: _row.boxType == '1'?'':_row.boxType,
        boxCondition: _row.boxCondition == '1'?'':_row.boxCondition
    }
    await saleBoxEastDate(reqParams).then(res=>{ 
        if(res.code == '00000' && res.data.length > 0){
            lineConfig1.xAxisData.length = 0
            lineConfig1.yAxisData.length = 0
            res.data.forEach(item=>{ 
                lineConfig1.xAxisData.push(item.dataTime)
                lineConfig1.yAxisData.push(item.boxQuantity)
            })
        }
       
    })
}

onMounted(() => {   
    getSaleDate(cahrtData)
    getSaleOrderPayAndPackedBoxQty(cahrtData)
    getSaleOrderTodoBoxQty(cahrtData)
    getSaleBoxEast(cahrtData)
})
// 获取时间区间
function getFormattedDate(date: Date): string {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}${month}${day}`;
}
</script>
<style lang="scss" scoped>
    .container{
        padding:0 20px;
    }
</style>